<template>
  <n-form ref="formRef" :model="props.formValue" :rules="rules" :label-width="100"
          label-placement="left">
    <n-grid x-gap="12">
      <template v-for="(item,index) in props.formList" :key="index+ 'form1'">
        <n-gi :span="item.span || 24">
          <slot v-if="item.slot" :name="item.slot" :formitem="item"></slot>
<!--          输入框-->
          <n-form-item v-else-if="item.type==='input'"  :path="item.path || item.key"
                       :label="item.label + '：'"   :rule="item.rules||[]">
              <n-input v-model:value="props.formValue[item.key]" @keydown.enter.prevent
                       :type="item.password || 'text'"
                       :placeholder="item.placeholder || '请输入'" clearable  >
                <template v-if="item.prefix" #prefix>
                  {{item.prefix}}
                </template>
                <template v-if="item.suffix" #suffix>
                  {{item.suffix}}
                </template>
              </n-input>
          </n-form-item>
<!--          文本域-->
          <n-form-item v-else-if="item.type==='textarea'" :path="item.path || item.key" :label="item.label + '：'"
                       :rule="item.rules||[]">
            <n-input v-model:value="props.formValue[item.key]" type="textarea" @keydown.enter.prevent
                     :placeholder="item.placeholder || '请输入'" clearable  />
          </n-form-item>
<!--          选择框-->
          <n-form-item v-else-if="item.type==='select'" :path="item.path || item.key" :label="item.label + '：'"
                       :rule="item.rules||[]">
            <n-select v-model:value="props.formValue[item.key]" @keydown.enter.prevent
                      :placeholder="item.placeholder || '请选择'"
                      clearable
                      :options="item.options || props.dictoptions[item.key] || []"></n-select>
          </n-form-item>
<!--          日期选择-->
          <n-form-item v-else-if="item.type==='picker'" :path="item.path || item.key" :label="item.label + '：'"
                       :type="item.datetype || 'date'" :rule="item.rules||[]">
            <n-date-picker v-model:value="props.formValue[item.key]" :type="item.datetype || 'date'" clearable />
          </n-form-item>
<!--          单选-->
          <n-form-item v-else-if="item.type==='radio'" :path="item.path || item.key" :label="item.label + '：'"
                       :rule="item.rules||[]">
            <n-radio-group  v-model:value="props.formValue[item.key]" name="radiogroup">
              <n-space>
                <n-radio  v-for="el in item.options || props.dictoptions[item.key] || []" :value="el.value">
                  {{ el.label }}
                </n-radio>
              </n-space>
            </n-radio-group>
          </n-form-item>
<!--          多选-->
          <n-form-item v-else-if="item.type==='checkbox'" :path="item.path || item.key" :label="item.label + '：'"
                       :rule="item.rules||[]">
            <n-checkbox-group v-model:value="props.formValue[item.key]">
              <n-space item-style="display: flex;">
                <n-checkbox v-for="el in item.options || props.dictoptions[item.key] || []" :value="el.value" :label="el.label" />
              </n-space>
            </n-checkbox-group>
          </n-form-item>
<!--          开关-->
          <n-form-item v-else-if="item.type==='switch'" :path="item.path || item.key" :label="item.label + '：'"
                       :rule="item.rules||[]">
            <n-switch v-model:value="props.formValue[item.key]" :round="false" />
          </n-form-item>
        </n-gi>
      </template>
    </n-grid>
  </n-form>
</template>

<script setup name="flexform">
import {useRoute, useRouter} from "vue-router";

const router = useRouter()
const route = useRoute()
const rules = ref({})
const formRef = ref(null)
const props = defineProps({
  formList: {
    type: Array,
  },
  dictoptions: {
    type: Object,
    default: {},
  },
  formValue:{
    type: Object,
    default: {},
  },
})

// 校验
const jiaoyan = (loginfunc) => {
  console.log("触发1")
  const jieguo = formRef.value.validate((errors) => {
    console.log("触发2")
    if (!errors) {
      loginfunc(props.formValue)
    }
  })
  return jieguo
}

defineExpose({jiaoyan})
</script>

<style scoped>

</style>
